<template>
  <div class="recommend">
    <div class="relative">
      <h3 class="relative_title">相关攻略</h3>
      <div
        class="item1"
        v-for="(v, i) in recommendAirticle"
        :key="i"
        @click="jump(v)"
      >
        <div class="item1_content" v-html="v.title"></div>
        <img :src="v.images[0]" alt="" class='smallimg'  >
        <div class="item1_info">
          <span>{{ getTime(v.created_at) }}</span>
          <span>阅读 {{ v.watch }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendAirticle: ""
    };
  },
  mounted() {
    // POSTS - 推荐文章  get方式
    // http:127.0.0.1:1337/posts/recommend
    // id 文章id
    this.$axios({
      url: "/posts/recommend",
      params: { id: this.$route.query.id }
    }).then(res => {
      console.log(res, "推荐文章");
      this.recommendAirticle = res.data.data;
      console.log(22,this.recommendAirticle);
    });
  },
  methods: {
    jump(v) {
      this.$emit("click", v);
      // console.log(v);
    },
    getTime(timestamp) {
      var date = new Date(timestamp); //时间戳为13位的话不需乘1000,时间戳为10位需*1000，
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() + " ";
      let h = date.getHours() + ":";
      let m = date.getMinutes();
      let s = date.getSeconds();
      // console.log(Y + M + D + h + m + s, 10101010);

      return Y + M + D + h + m;
    }
  }
};
</script>

<style lang="less" scoped>
.relative {
  width: 280px;
  margin-left: 20px;
  .relative_title {
    padding-bottom: 10px;
    color: orange;
    border-bottom: 1px dotted skyblue;
  }
  .item1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 100px;
    padding: 10px 0;
    font-size: 12px;
    border-bottom: 1px dotted skyblue;
    cursor: pointer;
    /deep/img {
      display: block;
    }
    .item1_content {
      font-size: 18px;
      color: #000;
      /deep/img {
        width: 100px;
        height: 80px;
      }
    }
     .item1_info{
        color:#999;
        font-size: 14px;
        
      }
  }
}
.smallimg{
  width: 100px;
  padding: 15px 0;
  
}
</style>
